<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from './stores/appStore'
import { darkTheme, lightTheme, useOsTheme } from 'naive-ui'
import { storeToRefs } from 'pinia'
import {
  NConfigProvider,
  NLoadingBarProvider,
  NDialogProvider,
  NNotificationProvider,
  NMessageProvider,
  NButton,
  NIcon,
  NTooltip
} from 'naive-ui'
import { MoonOutline, SunnyOutline } from '@vicons/ionicons5'

const router = useRouter()
const appStore = useAppStore()
const { isDarkTheme, themeMode } = storeToRefs(appStore)

// 主题设置
const osTheme = useOsTheme()
const theme = computed(() => {
  // 根据用户设置或系统主题决定是否使用暗色主题
  return isDarkTheme.value ? darkTheme : null
})

// 监听主题变化，更新data-theme属性
watch(isDarkTheme, (newVal) => {
  if (newVal) {
    document.documentElement.setAttribute('data-theme', 'dark')
  } else {
    document.documentElement.setAttribute('data-theme', 'light')
  }
}, { immediate: true })

// 主题覆盖
const themeOverrides = {
  common: {
    primaryColor: '#ff7d00',
    primaryColorHover: '#ff9500',
    primaryColorPressed: '#e67100'
  }
}

// 切换主题
const toggleTheme = () => {
  appStore.toggleTheme()
}

// 组件挂载
onMounted(() => {
  // 初始化应用
  initializeApp()
})

// 初始化应用
async function initializeApp() {
  // 这里可以放置应用初始化逻辑
  // 例如：加载用户设置、检查更新等
}
</script>

<template>
  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
    <n-loading-bar-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <n-message-provider>
            <div class="app-root">
              <router-view v-slot="{ Component }">
                <transition name="fade" mode="out-in">
                  <component :is="Component" />
                </transition>
              </router-view>
            </div>
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<style lang="scss">
.app-root {
  height: 100vh;
  width: 100vw;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.app-container {
  height: 100%;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

#app {
  height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 媒体查询 - 处理窗口大小变化 */
@media (max-height: 700px) {
  .app-root {
    min-height: 700px;
    /* 确保最小高度，允许滚动 */
  }

  /* 全局字体大小调整 */
  body {
    font-size: 14px;
  }

  /* 全局间距调整 */
  .n-button {
    padding: 0.4em 1em;
  }

  /* 减小表单控件间距 */
  .n-form-item {
    margin-bottom: 12px;
  }
}

@media (max-width: 768px) {
  .app-root {
    min-width: 600px;
    /* 确保最小宽度，允许水平滚动 */
  }

  /* 全局布局调整 */
  .n-layout-content {
    padding: 12px;
  }
}
</style>
